<!DOCTYPE html>
<html>
<head>
	<title></title>
<!-- 	<script type="text/javascript" src="lib/easeljs-0.7.1.min.js"></script>
	<script type="text/javascript" src="lib/tweenjs-0.5.1.min.js"></script> -->
</head>
<body>
	<h2>超级玛丽动画</h2>
	<img id="img1" src="images/image.png">
	<input id="btngo" type="button" value="开始" onclick="init()">
	<br/>
	<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid black;"></canvas>
</body>
</html>
<style>
	body {
		text-align: center;
	}
</style>

<script type="text/javascript">
	var startflag = false;
	var frames = [];
	for (var i = 0; i < 15; i++) {
		frames[i] = [i*32,0]
	}

	function $(id) {
		return document.getElementById(id)
	}

	var fwidth = 32,fheight = 32;

	function init() {
		if(!startflag) {
			var context = $("mycanvas").getContext("2d");
			var fIndex = 0;
			timer = setInterval(function() {
				context.clearRect(0,0,500,500)
				context.drawImage(img1,frames[fIndex][0],frames[fIndex][1],fwidth,fheight,100,100,fwidth*4,fheight*4)
			fIndex++;
			if(fIndex>=15) {
				fIndex = 0
			}
			},100)
			startflag = true;
			$("btngo").value = "停止"
		} else {
			startflag = false;
			$("btngo").value = "开始"
			clearInterval(timer)
		}
	}
</script>